<template>
  <div class="EventManage h-full bg-white">
    <a-button type="primary" @click="addEvent">新建</a-button>
    <div class="table">
      <a-table
        bordered
        :data-source="tableData"
        :pagination="pagination"
        :columns="columns"
        :custom-row="customRow"
      >
        <template slot="xh" slot-scope="text, record, index">
          {{index + 1}}
        </template>
        <template slot="createTime" slot-scope="text">
          {{ moment(text).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
        <template slot="opt" slot-scope="text, record">
          <a-icon @click="editEvent(record)" class="cur-pointer m-r-sm" type="edit" theme="twoTone" />
          <a-icon @click="deleteEvent(record.id)" class="cur-pointer" style="color: red" type="delete" />
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
  import { getColumns } from '@/api/tableColumns'
  import moment from 'moment'
export default {
  name: 'EventManage',
  data () {
    return {
      tableData: [
        {
          eventName: '事件1',
          bz: '1'
        }
      ],
      pagination: {
        pageSize: 10,
        total: 0,
        current: 1,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100', '200', '500'],
        showTotal: (total) => `共${total}条数据`,
        onShowSizeChange: (current, pageSize) => {
          this.pagination.pageSize = pageSize
          this.search()
        },
        onChange: (current, pageSize) => {
          this.pagination.current = current
          this.pagination.pageSize = pageSize
          this.search()
        }
      },
      columns: getColumns('eventManage')
    }
  },
  methods: {
    moment,
    search () {

    },
    addEvent () {
      const _this = this
      this.$dialog({
        title: '新建事件',
        content: () => import('./dialog/EventDetail'),
        width: 700,
        centered: true,
        maskClosable: false,
        on: {
          async ok (ctl) {
            const dialogCtl = ctl.getDialogCtl()
          }
        }
      })
    },
    customRow (record, index) {
      return {
        on: {
          dblclick: () => {
            this.editEvent(record)
          }
        }
      }
    },
    editEvent (record) {
      const _this = this
      this.$dialog({
        title: '编辑事件',
        content: () => import('./dialog/EventDetail'),
        width: 700,
        props: {
          event: record
        },
        centered: true,
        maskClosable: false,
        on: {
          async ok (ctl) {
            const dialogCtl = ctl.getDialogCtl()
          }
        }
      })
    },
    deleteEvent (id) {
      const _this = this
      this.$confirm({
        title: '提示',
        content: '确认执行删除操作',
        okText: '确认',
        cancelText: '取消',
        onOk: async () => {
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.EventManage{
  padding: 10px;
  .table{
    padding: 10px 0 30px 0;
  }
}
</style>
